<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域和闭包</title>
</head>
<body>
    <div>
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
<script>
    // function fn4(){
    //     console.log(c)
    // }
    // function fn3(){//函数在执行的时候 栈内存
    //     var c = 100;
    // }
    // fn3()
    // console.log(c)


    //闭包 函数内部返回一个新的函数
    //1.函数作为另一个函数的返回值
    var a = 200;
    function fn1(){//0x0001
        var a = 1;
        return function (){//0x0002
            console.log(a);//1
        }
    }
    var fn = fn1(); //0x0002
    fn();//-->1

    //2.函数作为参数被传递
    function fnc1(fnc){
        let a = 200;
        fnc()
    }
    function fnc(){
        console.log(a)
    }
    fnc1(fnc);

    // function fnc1(){
    //     let a = 200;
    //     (function (){
    //         console.log(a)
    //     })()
    // }
    // fnc1()


    //闭包的有优缺点
    //优点
    //（一）变量长期驻扎在内存中
    //（二）另一个就是可以重复使用变量，并且不会造成变量污染
    //缺点
    //由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。



</script>
<script>
    var liList = document.getElementsByTagName("li");
    // var liList = document.querySelectorAll("li");
    console.log(liList); //HTMLCollection html元素集合
    //HTMLCollection html元素集合 这是一个伪数组(类数组) 它拥有下标和长度,但是他的prototype不指向Array

    for (var i = 0; i < liList.length; i++) {
        // liList[i].addEventListener("click",function(e){
        //     console.log(e,i);
        // },true)

        // liList[i].onclick = (function (i) {
        //      return function () {
        //          console.log(i);
        //      }
        // })(i)
    }



    // var arr = [1,2,3,4];
    // arr.forEach(()=>{})
    // arr.map(()=>{})
    // arr.some(()=>{})
    // arr.every(()=>{})
    // arr.filter(()=>{})


</script>
<script>
//作用域
//1 全局 局部(函数) 块级
//全局作用域
//函数作用域 函数在执行的时候会产生一个独立作用域
//块级作用域 ES新增的 ==>{}

//2 作用域链
// function内部存在预解释
// 自由变量: 当前作用域没有定义的变量
// function的预解释优先级高于var出来的变量
// 自由变量的向上级作用域一层一层的查找,直到找到最高层全局作用域,这种机制 就是作用域链
// var x = 30;
// function test() { //x fn x
//     function x() {
//     }
//     alert(x); // fn x
//     var x = 10;
//     alert(x); //10
//     x = 20;
//     alert(x);//20
// }
// test();

// var a = 10;
// function a(){}
// console.log(a);

//1组 undefined  10 function x
//3组 ??  10  20
//4   undefined  10 20
//2组 function x 10 20
//5   fn x       10 20
//6   同上 +1

//作用域链==>自由变量的向上级作用域一层一层的查找,直到找到最高层全局作用域
//自由变量==>a
// var a = 10;
// function x(){
//     console.log(a);
//     (function(){
//         console.log(a);//10
//         console.log(b);//undefined
//     })()
// }
// x()





</script>
</body>
</html>